<template>
  <div class="back">
    <UserCard :userInfo="userCard" v-show="isShow" :rankInfo="rankInfo"></UserCard>
    <ContentCard
      v-show="isShow"
      :dataList="contentCard"
      @collect="handlerCollect"
      :collectData="collectData"
      :reviewList="reviewList"
      :communityList="communityList"
    ></ContentCard>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import UserCard from '@/components/client/user/UserCard.vue'
import ContentCard from '@/components/client/user/ContentCard.vue'
import { ElNotification } from 'element-plus'
import request from '@/util/request'

const route = useRoute()
const userId = route.params.userId
var user = localStorage.getItem('user')
const owner = Number(userId) === JSON.parse(user).id ? true : false

const isShow = ref(false)

const userCard = ref({})
const rankInfo = ref({
  history: null,
  contentCount: 0,
  rank: 0,
  follows: null,
  address: null,
  isOwn: owner
})

const collectData = ref({})
const communityList = ref([])

const reviewList = ref({})

watch(
  () => route.params.userId,
  () => {
    window.location.reload()
  }
)

const contentCard = ref({
  contents: null,
  like: 0,
  year: null,
  interest: null,
  review: 0,
  follows: null,
  collect: 0,
  notice: null
})

const getCollet = () => {
  var id = userId
  if (user.id === userId) {
    id = null
  }
  request
    .get(`/user/collected?userId=${id}`)
    .then((res) => {
      console.log('获取成功：', res)
      collectData.value = res.data
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

const handlerCollect = () => {
  getCollet()
}

const getUser = () => {
  user = JSON.parse(user)
  var id = userId
  if (user.id === userId) {
    id = null
  }
  console.log('进入了用户详情页面', id)

  request
    .get(`/user/userinfo?userId=${id}`)
    .then((res) => {
      userCard.value = res.data.user
      console.log(userCard.value)
      rankInfo.value.history = res.data.history
      rankInfo.value.contentCount = res.data.contents.length
      rankInfo.value.rank = res.data.rank.rank
      rankInfo.value.follows = res.data.follows.length
      rankInfo.value.address = res.data.ipRegion

      contentCard.value.collect = res.data.collect
      contentCard.value.notice = res.data.notice
      contentCard.value.contents = res.data.contents
      contentCard.value.interest = res.data.interest
      contentCard.value.year = res.data.year
      contentCard.value.follows = res.data.follows
      contentCard.value.like = res.data.like
      contentCard.value.review = res.data.review
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

const getReviewList = () => {
  request
    .get('/user/review/list')
    .then((res) => {
      console.log('获取成功：', res)
      reviewList.value = res.data
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

const getCommunityList = () => {
  request
    .get('/user/community/user_list')
    .then((res) => {
      console.log('获取成功：', res)
      communityList.value = res.data
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

console.log('用户详情页面', userId)
onMounted(() => {
  setTimeout(() => {
    isShow.value = true
  }, 1000)
  getUser()
  getReviewList()
  getCommunityList()
})
</script>

<style scoped lang="scss">
.back {
  width: 100%;
  padding-bottom: 20px;
  padding-top: 40px;
  background-color: black;
  background-image: radial-gradient(white, rgba(255, 255, 255, 0.2) 2px, transparent 40px),
    radial-gradient(white, rgba(255, 255, 255, 0.15) 1px, transparent 30px),
    radial-gradient(white, rgba(255, 255, 255, 0.1) 2px, transparent 40px),
    radial-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1) 2px, transparent 30px);
  background-size:
    550px 550px,
    350px 350px,
    250px 250px,
    150px 150px;
  background-position:
    0 0,
    40px 60px,
    130px 270px,
    70px 100px;
}
</style>
